<!-- 顶栏菜单 -->

<template>
	<el-menu :default-active="activeIndex" style="border-bottom: 0;" class="el-menu-demo" mode="horizontal"
		background-color="#0d2943" text-color="#78818C" active-text-color="#ffffff" @select="handleSelect">

		<!-- logo -->
		<span style="margin-top: 7px; margin-left: 7px">
			<img src="@/assets/images/logo.png" class="logo">
		</span>

		<!-- DataMagic -->
		<span class="datamagic">DataMagic</span>

		<!-- 菜单图标1 -->
		<img src="@/assets/images/菜单.png" class="icon1">

		<!-- 空间图标2 -->
		<img src="@/assets/images/空间.png" class="icon2">

		<!-- 检察院 -->
		<span class="proc">京州市人民检察院</span>

		<!-- 顶栏菜单 -->
		<el-menu-item index="1">数据集成</el-menu-item>
		<el-menu-item index="2">非结处理</el-menu-item>
		<el-menu-item index="3">数据管理</el-menu-item>
		<el-menu-item index="4">数据资源</el-menu-item>
		<el-menu-item index="5">数据建模</el-menu-item>
		<el-menu-item index="6">系统配置</el-menu-item>

		<!-- 消息图标3 -->
		<el-badge :value="99" class="badge">
			<img src="@/assets/images/消息.png" class="icon3">
		</el-badge>

		<div
			style="background-color:brown; margin-left: 26px; height: 25px; margin-top: 18px;border-left: 1px solid white; border-right: 1px solid white; opacity: 0.1">
		</div>

		<!-- 用户图标4 -->
		<img src="@/assets/images/用户.png" class="icon4">

		<!-- 问好 -->
		<span class="greet">您好，管理员</span>

		<div
			style="background-color:brown; margin-left: 20px; height: 25px; margin-top: 18px;border-left: 1px solid white; border-right: 1px solid white; opacity: 0.1">
		</div>

		<!-- 时间 -->
		<div id="time" class="time"></div>

		<!-- 退出图标5 -->
		<img src="@/assets/images/退出.png" class="icon5">

	</el-menu>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

// 顶栏菜单
const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
	console.log(key, keyPath)
}

// 时间
function updateTime() {
	var now = new Date();
	var year = now.getFullYear();
	var month = String(now.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的，所以要加1  
	var day = String(now.getDate()).padStart(2, '0');
	var hours = String(now.getHours()).padStart(2, '0');
	var minutes = String(now.getMinutes()).padStart(2, '0');
	var seconds = String(now.getSeconds()).padStart(2, '0');
	var timeString = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
	var timeElement = document.getElementById("time");
	if (timeElement) {
		timeElement.innerText = timeString;
	} else {
	}
}
updateTime();
setInterval(updateTime, 1000); 
</script>

<style scoped>
.logo {
	height: 40px;
	width: 40px;
}

.datamagic {
	width: 115px;
	font-family: DingTalk-JinBuTi;
	font-size: 25px;
	letter-spacing: -1px;
	color: #ffffff;
	margin-left: 5px;
	margin-top: 10px;
}

.icon1 {
	width: 16px;
	height: 15px;
	margin-top: 22px;
	margin-left: 20px;
	opacity: 0.5
}

.icon1:hover {
	opacity: 1
}

.icon2 {
	width: 16px;
	height: 18px;
	margin-left: 14px;
	margin-top: 20px;
}

.proc {
	width: 130px;
	font-size: 14px;
	color: #bdc2c7;
	margin-top: 20px;
	margin-left: 10px;
	margin-right: 215px;
}

.el-menu-item {
	border-bottom: none !important;
	font-size: 16px;
}

.el-menu-item:hover {
	background-color: #1B364E !important;
	color: #ffffff !important;
}

.el-menu-item.is-active {
	background-color: #1B364E !important;
	font-size: 16px;
}

.badge {
	margin-top: 20px;
}

::v-deep .el-badge__content {
	border: none !important;
}

.icon3 {
	width: 25px;
	height: 25px;
	opacity: 0.6;
	margin-left: 200px;
	margin-top: -2px;
}

.icon3:hover {
	opacity: 1;
}

.icon4 {
	width: 25px;
	height: 25px;
	opacity: 0.6;
	margin-top: 18px;
	margin-left: 20px;
}

.icon4:hover {
	opacity: 1;
}

.greet {
	width: 85px;
	font-size: 14px;
	color: #ffffff;
	margin-top: 20px;
	margin-left: 10px;
}

.time {
	width: 140px;
	font-size: 14px;
	color: #ffffff;
	margin-top: 20px;
	margin-left: 20px;
}

.icon5 {
	width: 25px;
	height: 26px;
	margin-top: 18px;
	opacity: 0.6;
	margin-left: 20px;
}

.icon5:hover {
	opacity: 1;
}
</style>